<template>
  <div>
    <div class="Upheader">
      <div class="button" @click="$router.go(-1)">
        <span class="iconfont icon-arrow-left-bold"></span>
        我的资料
      </div>
    </div>

    <div class="Uplist">
        <ul>
            <li>
                <p>用户昵称：</p>
                <input type="text" :placeholder="user.nickname">
            </li>
            <li>
                <!-- <p>省份：</p>
                <input type="text" :placeholder="user.province"> -->

                <van-field
                  v-model="fieldValue"
                  is-link
                  readonly
                  label="地区："
                  placeholder="请选择所在地区"
                  @click="show = true"
                />
                <van-popup v-model="show" round position="bottom">
                  <van-cascader
                    v-model="cascaderValue"
                    title="请选择所在地区"
                    :options="options"
                    @close="show = false"
                    @finish="onFinish"
                  />
                </van-popup>
            </li>
            <!-- <li>
                <p>城市：</p>
                <input type="text" :placeholder="user.city">
            </li> -->
            <li>
                <p>用户签名：</p>
                <input type="text" :placeholder="user.signature">
            </li>
        </ul>
    </div>

    <div class="created">
        <button>更新</button>
    </div>
  </div>
</template>

<script>
import { getUser} from "../../api/userInfo";

import Vue from 'vue';
import { Cascader } from 'vant';
Vue.use(Cascader);

export default {
  data() {
    return {
      user:[], // 输入框提示

      show: false,
      fieldValue: '',
      cascaderValue: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: '浙江省',
          value: '330000',
          children: [{ text: '杭州市', value: '330100' }],
        },
        {
          text: '江苏省',
          value: '320000',
          children: [{ text: '南京市', value: '320100' }],
        },
      ],
    };
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
    },
    // 获取用户信息
    getUserFun() {
        getUser({ uid: this.$store.state.userId }).then((data) => {
            // console.log(data.profile)
            this.user = data.profile
        });
    },


  },
  created(){
      this.getUserFun()
  }
};
</script>

<style lang="less">
    .created{
        margin: 20px;
        button{
            background: #1989FA;
            padding: 10px 0px;
            width: 100%;
            outline: none;
            border: none;
            color: #fff;
            font-size: 16px;
        }
    }

    .Uplist{
        ul{
            li{
                padding: 10px;
                font-size: 16px;
                background: #fff;
                margin-bottom: 2px;
                p{
                    float: left;
                    color: #333;
                    margin: 0px;
                }
                input{
                    color: #999;
                    border: none;
                    font-size: 14px;
                }

                .van-cell__title{
                    span{
                       font-size: 16px;
                       color: #333;
                    }
                }
                .van-cell{
                    padding: 0px;
                    &::after{
                    border: none;
                }
                }
                
            }
        }
    }

    body{
        background: #F5F5F5;
    }
    .Upheader {
        margin-bottom: 10px;
        .button {
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            color: #333;
            background: #fff;
            padding-left: 10px;
            span{
                font-size: 20px;
            }
        }
    }
    
</style>
